<template>
  <div class="lzxcPage">
    <!-- 廉政建设 -->
    <div class="leftEcharts" id="lzxc_echarts"></div>
    <div class="rightTab">
      <p :class="tabType == 1 ? 'tabActive' : ''" @click="tabClick(1)">
        <label>廉政宣传</label>
      </p>
      <p :class="tabType == 2 ? 'tabActive' : ''" @click="tabClick(2)">
        <label>清廉建设</label>
      </p>
      <p :class="tabType == 3 ? 'tabActive' : ''" @click="tabClick(3)">
        <label>队伍建设</label>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["LzxcData"],
  data() {
    return {
      tabType: 1,
    };
  },
  mounted() {
    setTimeout(() => {
      const data = [
        {
          value: Number(this.LzxcData[0]),
          name: "专业书籍",
        },
        {
          value: Number(this.LzxcData[1]),
          name: "身边人案例",
        },
        {
          value: Number(this.LzxcData[2]),
          name: "警示片资料",
        },
        {
          value: Number(this.LzxcData[3]),
          name: "清廉手册",
        },
      ];
      this.drawChart(data);
    }, 1000);
  },
  methods: {
    tabClick(t) {
      let data = [];
      this.tabType = t;
      if (t === 1) {
        data = [
          {
            value: Number(this.LzxcData[0]),
            name: "专业书籍",
          },
          {
            value: Number(this.LzxcData[1]),
            name: "身边人案例",
          },
          {
            value: Number(this.LzxcData[2]),
            name: "警示片资料",
          },
          {
            value: Number(this.LzxcData[3]),
            name: "清廉手册",
          },
        ];
      }
      if (t === 2) {
        data = [
          {
            value: Number(this.LzxcData[4]),
            name: "清廉品牌",
          },
          {
            value: Number(this.LzxcData[5]),
            name: "清廉作品",
          },
          {
            value: Number(this.LzxcData[6]),
            name: "清廉微视频",
          },
          {
            value: Number(this.LzxcData[7]),
            name: "清廉产投宣传视频",
          },
        ];
      }
      if (t === 3) {
        data = [
          {
            value: Number(this.LzxcData[8]),
            name: "纪检委员",
          },
          {
            value: Number(this.LzxcData[9]),
            name: "纪检专干",
          },
          {
            value: Number(this.LzxcData[10]),
            name: "通过司考人员",
          },
        ];
      }

      this.drawChart(data);
    },
    drawChart(data) {
      var myChart = this.$echarts.init(document.getElementById("lzxc_echarts"));
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "top",
          layout: "vertical",
          right: "10%",
          y: "center",
          textStyle: {
            // 图例文字的样式
            color: "#e0ebff",
            fontSize: 13,
            padding: [0, 5],
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
          formatter: function (name) {
            const data = option.series[0].data;
            // console.log(data, 'data')
            let total = 0;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                tarValue = data[i].value;
              }
            }
            const v = tarValue;

            const p = Math.round((tarValue / total) * 100); // 占比

            return `${name}\n\n${v}   ${p}%`;
          },
        },
        color: ["#fbc829", "#16edf4", "#148ff9", "#ff5047"],
        series: [
          {
            type: "pie",
            radius: ["50%", "40%"],
            center: ["35%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 3,
            itemStyle: {
              borderRadius: 0,
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data,
          },
        ],
        graphic: {
          type: "text",
          left: "31.5%", // 水平居中
          top: "45%", // 垂直居中

          style: {
            text: "",
            textAlign: "center",
            fill: "#fff", // 文字颜色
            fontSize: 20,
          },
        },
      };

      myChart.setOption(option);
      this.updateText(data);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 动态更新文字的函数
    updateText(data) {
      // 获取当前的option
      const chart = this.$echarts.init(document.getElementById("lzxc_echarts"));
      const currentOption = chart.getOption();
      let sum = 0;
      data.forEach((element) => {
        sum += element.value;
      });
      // 更新graphic中的文本内容
      currentOption.graphic[0].elements[0].style.text = sum;

      // 设置更新后的option
      chart.setOption(currentOption);
    },
  },
};
</script>

<style lang="scss" scoped>
.lzxcPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  display: flex;
  flex-direction: row;
  padding: 20px 10px;
  box-sizing: border-box;
  .leftEcharts {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
  }
  .rightTab {
    width: 30px;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    transition: 0.5s;

    p {
      width: 30px;
      height: 100%;
      flex: 1;
      margin: 0;
      float: left;
      padding: 0;

      label {
        width: 30px;
        height: 100%;
        text-align: center;
        background: url("../assets/img/tabBg.png") center no-repeat;
        background-size: 100% 100%;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 12px;
        color: #d0e0fe;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      &:hover,
      &.tabActive {
        label {
          font-weight: bold;
          background: url("../assets/img/tabActiveBg.png") center no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
